import { EchartService } from '@app/shared/utils/echart.service'
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'
import { FormBuilder, Validators, FormGroup } from '@angular/forms'
import { QlMessageService } from 'qloud-angular'
import { plainToClass } from 'class-transformer'
import { DictService } from '@app/shared/utils/dict.service'
import { ApiService } from '../../services/api.service'
import { ActivatedRoute } from '@angular/router'
import { ModalService } from '@app/shared/utils'
import { NetService, PageService } from '@app/core/http'
import { Router } from '@angular/router'
import { CursorService } from '@app/core/http/cursor.service'
import { Store } from '@ngxs/store'
import { ModalConfirmComponent } from '@app/shared/components/modal-confirm/modal-confirm.component'

@Component({
  selector: 'app-customer-view',
  templateUrl: './customer-view.component.html',
  styleUrls: ['./customer-view.component.css'],
  providers: [ApiService]
})
export class CustomerViewComponent implements OnInit {
  public formGroup: FormGroup
  public customerList
  public tradeAssetOptions
  public tradeEventOptions
  public tradeAgeOptions
  public tradeSexOptions
  public customerTagList = []
  public customerProductList = []
  public marketList = []

  public viewCusno
  public viewCusname
  public viewCuschange

  constructor(
    private echartService: EchartService,
    private fb: FormBuilder,
    private apiService: ApiService,
    public modal: ModalService,
    public dictService: DictService,
    public cursorService: CursorService,
    private message: QlMessageService,
    public pageService: PageService,
    private router: Router,
    private store: Store,
    public route: ActivatedRoute) {}

  ngOnInit() {
    this.formGroup = this.fb.group({
      code: [''],
      name: [''],
      sex: [''],
      age: [''],
      manager: [''],
      dayAUM: [''],
      nowAUM: [''],
      content: ['']
    })

    this.onRefresh()
    this.getCustomerViewData()
  }

  public onRefresh() {
    if(this.viewCusno != '' && this.viewCusno !== undefined){
      this.cursorService.query().eq('customerno',this.viewCusno)
    }
    if(this.viewCusname != '' && this.viewCusname !== undefined){
      this.cursorService.query().eq('customername',this.viewCusname)
    }
    if(this.viewCuschange != '' && this.viewCuschange !== undefined){
      this.cursorService.query().eq('chargename',this.viewCuschange)
    }

    this.apiService.getCustomerEventList(this.cursorService).subscribe(data => {
      this.customerList = data
    })
    this.cursorService.query({reset:true})
  }

  public getCustomerViewData() {
    // this.apiService.getCustomerViewData().subscribe(({ tradeAsset, tradeEvent, tradeAge, tradeSex }) => {
    //   // 资产
    //   this.getTradeAssetOption(tradeAsset)
    //   // 交易行为
    //   this.getTradeEventOption(tradeEvent)
    //   // 年龄
    //   this.tradeAgeOptions = this.echartService.getOption({ type: 'pie', data: tradeAge })
    //   // 性别
    //   this.tradeSexOptions = this.echartService.getOption({ type: 'pie', data: tradeSex })
    // })

    this.apiService.getCusAssets().subscribe(data =>{
      this.getTradeAssetOption(data)
    })

    this.apiService.getCusAction().subscribe(data =>{
      this.getTradeEventOption(data)
    })

    this.apiService.getCusAge().subscribe(data =>{
      this.tradeAgeOptions = this.echartService.getOption({ type: 'pie', data: data })
    })

    this.apiService.getCusSex().subscribe(data =>{
      this.tradeSexOptions = this.echartService.getOption({ type: 'pie', data: data })
    })

    // this.apiService.getCustomerTagList('tag').subscribe(data => {
    //   this.customerTagList = data.sort(x => 0.5 - Math.random()).slice(0, 10)
    // })

    // this.apiService.getcostomerDetaildkList().subscribe(data => {
    //   this.customerProductList = data
    // })

    this.apiService.getCustomerRankList(this.cursorService).subscribe(data => {
      this.marketList = data
    })
  }

  public getTradeEventOption(data) {
    this.tradeEventOptions = this.echartService.getOption({ type: 'pie', data })
  }

  public getTradeAssetOption(data) {
    this.tradeAssetOptions = this.echartService.getOption({ type: 'pie', data })
  }

  public onExportExcel() {}
}
